<template>
  <div class="container" v-loading="isLoading">
    <el-card>
      <template #header>
        <el-form inline ref="searchForm">
          <el-form-item label="社区活动名称">
            <el-select v-model="communityId" @change="changeName">
              <el-option
                v-for="(oVal, oIdx) of activityList"
                :key="oIdx"
                :label="oVal.label"
                v-bind="oVal"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="Search()">查询</el-button>
          </el-form-item>
        </el-form>
        <div class="table_tool">
          <el-button type="success" @click="exportExcel">导出签退报表</el-button>
        </div>
      </template>
      <el-table :data="tableData" border id="out-table" stripe>
        <el-table-column prop="activityName" label="活动标题" />
        <el-table-column prop="user_real_name" label="姓名" />
        <el-table-column prop="user_phone" label="手机号" />
        <el-table-column prop="user_addr_info" label="住址" />
        <el-table-column prop="user_sex" label="性别" />
        <el-table-column prop="user_nick_name" label="微信昵称" />
        <el-table-column prop="user_avatal_url" label="微信头像">
          <template slot-scope="{ row }">
            <el-image
              style="width: 100px; height: 100px"
              :src="row.user_avatal_url"
              :preview-src-list="[row.user_avatal_url]"
            />
          </template>
        </el-table-column>
        <el-table-column prop="sign_out_time" label="签到时间" />
      </el-table>
    </el-card>
    <footer class="footer">
      <el-pagination
        background
        layout="total, sizes, pager, jumper"
        :current-page="searchForm.page"
        :page-sizes="[10, 20, 30, 50, 100]"
        :page-size="searchForm.page_size"
        :total="tableTotal"
        @size-change="changeSize"
        @current-change="changeCurrent"
      />
    </footer>
  </div>
</template>

<script>
import API from "@/api";
import FileSaver from 'file-saver'
import * as XLSX from 'xlsx'
import { table, addOrEdit } from "@/utils/mixins";
export default {
  mixins: [table, addOrEdit],
  data: () => ({
    communityId:"",//社区活动id
    isLoading:true,
    tableData:[],
    tableTotal: 0,
    isKey: false,
    searchForm: {
      page: 1, // 当前页码
      per_page: 20, // 每页条数
    },
    activityList:[],
    activityName:'',
  }),


  created() {
    API.getCommunityActList("",{ page_size: 100 })
      .then(({ data }) => {
        this.activityList = data.items.map((v) => ({
          label: v.title,
          value: v.id,
        }));
        this.communityId=this.activityList[0].value
        this.activityName=this.activityList[0].label
        this.Search()
      })
      .catch();
  },
  methods: {
    Search(){
      this.isLoading=true
      API.getCommunityActivitySignOutList(this.communityId,this.searchForm).then(({data})=>{
        let signUserinfo=data.map(item=>{
          return {
            activityName:this.activityName,
            user_real_name:item.user_info.user_real_name,
            user_phone:item.user_info.user_phone,
            user_sex:item.user_info.user_sex=="1"?"男":"女",
            user_addr_info:item.user_info.user_addr_info,
            user_nick_name:item.user_info.user_nick_name,
            user_avatal_url:item.user_info.user_avatal_url,
            sign_out_time:item.user_info.sign_out_time
          }
        })
        this.tableData=signUserinfo
        this.tableTotal=signUserinfo.length
      }).catch(()=>{
        this.tableData=[]
        this.tableTotal=0
      }).finally(() =>{
        this.isLoading=false
      })
    },

    // 分页
    changeSize(val){
      this.searchForm.per_page = val
      this.searchForm.page = 1
      this.Search()
    },

    // 分页
    changeCurrent(val){
      this.searchForm.page = val
      this.Search()
    },

     exportExcel() {
      let activityName=this.activityName
      var wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      });
      try {
        FileSaver.saveAs(
            new Blob([wbout], { type: "application/octet-stream" }),
            //设置导出文件名称
            `${activityName}签退数据.xlsx`
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },

    changeName(e){
      this.activityName=this.activityList.filter(item=>{
        return item.value==e
      })[0].label
      console.log('2',this.activityName)
    }
  },
};
</script>

<style lang="scss" scoped>
  ::v-deep{
    .el-form-item__content{
      width:500px;
    }
    .el-select{
      width:100%;
    }
  }
</style>
